<style lang="scss">
  .like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }
</style>
<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      {{ queryParams.createTime }}账单
      <el-form-item prop="all">
        <el-date-picker
          v-model="queryParams.createTime"
          :editable="false"
          :clearable="false"
          @change="changeIndex"
          value-format="yyyy-MM"
          type="month"
          placeholder="选择月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="all">
        <el-input
          v-model="queryParams.all"
          placeholder="支持姓名/工号查询"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="2">
        <div>
          <el-statistic title="参保人数">
            <template slot="formatter">
              {{ bill.total }}
            </template>

          </el-statistic>
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-statistic title="个人社保">
            <template slot="formatter">
              {{ bill.grInsuranceMoney.toFixed(2) }}
            </template>

          </el-statistic>
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-statistic title="企业社保">
            <template slot="formatter">
              {{ bill.companyInsuranceMoney.toFixed(2) }}
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-statistic title="个人公积金">
            <template slot="formatter">
              {{ bill.grFundPayment.toFixed(2) }}
            </template>

          </el-statistic>
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-statistic title="企业公积金">
            <template slot="formatter">
              {{ bill.companyFundPayment.toFixed(2) }}
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>


    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:scheme:export']"
        >导出
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          size="mini"
          @click="uploadBill"
        >拉取本月社保账单
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          size="mini"
          @click="synchronizationSalary"
        >同步薪酬
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="schemeList" @selection-change="handleSelectionChange">
      <el-table-column width="120" label="姓名" align="center" prop="empName"/>
      <el-table-column width="120" label="工号" align="center" prop="jobNo"/>
      <el-table-column width="120" label="部门" align="center" prop="deptName"/>
      <el-table-column :show-overflow-tooltip="true" width="120" label="职务" align="center" prop="positionApplied"/>
     <!-- <el-table-column :show-overflow-tooltip="true" width="160" label="公司" align="center" prop="enterprise"/>-->
      <el-table-column width="120" label="工作性质" align="center" prop="workNature"/>
      <el-table-column width="160" label="证件号码" align="center" prop="identificationNumber"/>
      <el-table-column width="120" label="个人社保基数" align="center" prop="grYlBase"/>
      <el-table-column width="120" label="个人公积金基数" align="center" prop="grFundBase"/>
      <el-table-column width="120" label="企业社保基数" align="center" prop="companyYlBase"/>
      <el-table-column width="120" label="企业公积金基数" align="center" prop="companyFundBase"/>
      <el-table-column :show-overflow-tooltip="true" width="160" label="参保城市" align="center" prop="schemeCity"/>
      <el-table-column width="160" label="缴纳平台" align="center" prop="schemePlatform"/>
      <el-table-column width="140" label="养老保险(个人)" align="center" prop="grYlMoney"/>
      <el-table-column width="140" label="医疗保险(个人)" align="center" prop="grCareMoney"/>
      <el-table-column width="140" label="失业保险(个人)" align="center" prop="grSyMoney"/>
      <el-table-column width="140" label="生育保险(个人)" align="center" prop="grBirthMoney"/>
      <el-table-column width="140" label="工商保险(个人)" align="center" prop="grGsMoney"/>
      <el-table-column width="140" label="住房公积金(个人)" align="center" prop="grFundPayment"/>
      <el-table-column width="160" label="社保公积金合计(个人)" align="center" prop="grInsuranceMoney">
        <template slot-scope="scope">
          <span>{{ scope.row.grInsuranceMoney + scope.row.grFundPayment }}</span>

        </template>
      </el-table-column>
      <el-table-column width="140" label="养老保险(企业)" align="center" prop="companyYlMoney"/>
      <el-table-column width="140" label="医疗保险(企业)" align="center" prop="companyCareMoney"/>
      <el-table-column width="140" label="失业保险(企业)" align="center" prop="companySyMoney"/>
      <el-table-column width="140" label="生育保险(企业)" align="center" prop="companyBirthMoney"/>
      <el-table-column width="140" label="工商保险(企业)" align="center" prop="companyGsMoney"/>
      <el-table-column width="140" label="住房公积金(企业)" align="center" prop="companyFundPayment"/>
      <el-table-column width="160" label="社保公积金合计(企业)" align="center" prop="companyInsuranceMoney">
        <template slot-scope="scope">
          <span>{{ scope.row.companyInsuranceMoney + scope.row.companyFundPayment }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>

  import {billCreateTimeChange, getSchemeList,bill,synchronizationSalary} from '@/api/system/scheme'

  Date.prototype.format = function (fmt) {
    var o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
      "h+": this.getHours(), //小时
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  }

  export default {
    name: "Scheme",
    data() {
      return {
        bill: {
          total: 0,
          grInsuranceMoney: 0.00,
          companyInsuranceMoney: 0.00,
          grFundPayment: 0.00,
          companyFundPayment: 0.00
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          createTime: new Date(new Date()).format("yyyy-MM")
        },
        schemeList: [],
        total: 0,
        loading: false
      };
    },
    created() {
      this.changeIndex()
    },
    methods: {
      synchronizationSalary(){
        this.$confirm('此操作将同步本月社保账单到薪酬列表', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '正在同步到薪酬列表，请稍等！',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          synchronizationSalary(this.queryParams).then(res => {
            loading.close();
            this.$message({
              type: 'success',
              message: '已同步'
            });
          })
        }).catch(() => {
          loading.close();
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      uploadBill(){
        this.$confirm('是否确认拉取本月社保账单', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          bill(this.queryParams).then(res =>{
            this.changeIndex()
            this.$message({
              type: 'success',
              message: '已同步'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });

      },
      changeIndex() {
        this.getList();
        this.getTotal()
      },
      getTotal() {
        billCreateTimeChange(this.queryParams).then(res => {
          this.bill = res.data
        })
      },
      resetQuery() {
        this.queryParams.all = ''
        this.queryParams.pageNum = 1
        this.changeIndex()
      },
      handleQuery() {
        this.changeIndex()
      },
      /** 查询【请填写功能名称】列表 */
      getList() {
        this.loading = true
        getSchemeList(this.queryParams).then(res => {
          this.schemeList = res.rows
          this.total = res.total
          this.loading = false
        })
      },
      handleSelectionChange() {

      },
      handleExport() {

      }
    }
  }
</script>
